import React, { useEffect, useState, useRef } from 'react';
import './index.less';
import { Tabs, Button, Space, Popup } from 'antd-mobile';
import axios from 'axios';
import { GiftOutline, DownOutline, UpOutline } from 'antd-mobile-icons';
import { history } from 'umi';
import jpg1 from '@/pages/home/xl1/1.jpg';
import jpg2 from '@/pages/home/xl1/2.jpg';
import jpg3 from '@/pages/home/xl1/3.jpg';
import jpg4 from '@/pages/home/xl1/3.jpg';
import jpg5 from '@/pages/home/xl1/4.jpg';
type Props = {};

export default function index({}: Props) {
  let [nanj, setnanj] = useState(false);
  let [nvj, setnvj] = useState(false);
  let [yunj, setyunj] = useState(false);
  let [shuju, setshuju] = useState([]);
  const [visible1, setVisible1] = useState(false);
  let [img, setimg] = useState('');
  let [price, setprice] = useState();
  let [title, settitle] = useState('');
  let [num, setnum] = useState(1);
  useEffect(() => {
    axios.get('http://localhost:3001/posts').then((res) => {
      console.log(res.data);
      setshuju((shuju = res.data));
    });
  }, []);
  let s = useRef();
  let [show, setshow] = useState(false);
  // 触底加载
  let chudi = () => {
    let ss = s.current;
    if (ss.scrollHeight - 50 <= ss.offsetHeight + ss.scrollTop) {
      setshuju([...shuju, ...shuju]);
      // console.log(date);
    }
    // console.log(ss.offsetHeight);
    // console.log(ss.scrollHeight);
    if (show == false && ss.scrollHeight > 1095) {
      setshow(true);
    }
  };
  // 回到顶部
  let huiding = () => {
    let hddb = setInterval(() => {
      if (s.current.scrollTop <= 0) {
        clearInterval(hddb);
        setshow(false);
      } else {
        s.current.scrollTop = s.current.scrollTop - 50;
      }
    }, 10);
  };
  return (
    <div
      className="xl1"
      style={{ overflow: 'scroll', height: '52rem' }}
      onScroll={chudi}
      ref={s}
    >
      <div
        style={{ display: show ? 'block' : 'none' }}
        className="dingbu"
        onClick={huiding}
      >
        <UpOutline />
      </div>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        bodyStyle={{ height: '40vh' }}
      >
        <img src={img} alt="" style={{ height: '50px', width: '50px' }} />
        <br />
        {title}
        <br />￥{price}
        <button
          onClick={() => {
            if (num === 1) {
            } else {
              setnum(num--);
            }
          }}
        >
          -
        </button>
        {num}
        <button
          onClick={() => {
            setnum(num++);
          }}
        >
          +
        </button>
      </Popup>
      <div className="input">
        <input type="text" onClick={() => {}} />
        <a
          onClick={() => {
            history.push('/xl3');
          }}
        >
          搜索
        </a>
      </div>
      <div className="div">
        <Tabs>
          <Tabs.Tab title="男装" key="fruits">
            <Button
              onClick={() => {
                if (nanj === false) {
                  axios
                    .get(`http://localhost:3001/posts?_sort=price`)
                    .then((res) => {
                      // console.log(res.data);
                      setshuju(res.data);
                    });
                  setnanj((nanj = true));
                } else {
                  axios
                    .get(`http://localhost:3001/posts?_sort=price&_order=desc`)
                    .then((res) => {
                      // console.log(res.data);
                      setshuju(res.data);
                    });
                  setnanj((nanj = false));
                }
              }}
            >
              <Space>
                <span>价格</span>
                <DownOutline
                  style={{ display: nanj === false ? '' : 'none' }}
                />
                <UpOutline style={{ display: nanj === false ? 'none' : '' }} />
              </Space>
            </Button>
            <div className="iin">
              {shuju.map((item, index) => {
                return (
                  <div
                    className="content"
                    key={index}
                    style={{ display: item.age === '男' ? '' : 'none' }}
                  >
                    <div>
                      {/* <img src={item.tup} alt="" /> */}
                      <div
                        className="img"
                        style={{ backgroundColor: 'red' }}
                      ></div>
                    </div>
                    <div>{item.title}</div>
                    <div className="price__11">
                      ￥{item.price}{' '}
                      <GiftOutline
                        onClick={() => {
                          setVisible1(true);
                          setimg((img = item.tup));
                          setprice((price = item.price));
                          settitle((title = item.title));
                        }}
                      />
                    </div>
                  </div>
                );
              })}
            </div>
          </Tabs.Tab>
          <Tabs.Tab title="女装" key="vegetables">
            <Button
              onClick={() => {
                if (nvj === false) {
                  axios
                    .get(`http://localhost:3001/posts?_sort=price`)
                    .then((res) => {
                      // console.log(res.data);
                      setshuju(res.data);
                    });
                  setnvj((nvj = true));
                } else {
                  axios
                    .get(`http://localhost:3001/posts?_sort=price&_order=desc`)
                    .then((res) => {
                      // console.log(res.data);
                      setshuju(res.data);
                    });
                  setnvj((nvj = false));
                }
              }}
            >
              <Space>
                <span>价格</span>
                <DownOutline style={{ display: nvj === false ? '' : 'none' }} />
                <UpOutline style={{ display: nvj === false ? 'none' : '' }} />
              </Space>
            </Button>
            <div className="iin">
              {shuju.map((item, index) => {
                return (
                  <div
                    className="content"
                    key={index}
                    style={{ display: item.age === '女' ? '' : 'none' }}
                  >
                    <div>
                      <img src={item.tup} alt="" />
                    </div>
                    <div>{item.title}</div>
                    <div>
                      ￥{item.price} <GiftOutline />
                    </div>
                  </div>
                );
              })}
            </div>
          </Tabs.Tab>
          <Tabs.Tab title="运动" key="animals">
            <Button
              onClick={() => {
                if (yunj === false) {
                  axios
                    .get(`http://localhost:3001/posts?_sort=price`)
                    .then((res) => {
                      // console.log(res.data);
                      setshuju(res.data);
                    });
                  setyunj((yunj = true));
                } else {
                  axios
                    .get(`http://localhost:3001/posts?_sort=price&_order=desc`)
                    .then((res) => {
                      // console.log(res.data);
                      setshuju(res.data);
                    });
                  setyunj((yunj = false));
                }
              }}
            >
              <Space>
                <span>价格</span>
                <DownOutline
                  style={{ display: yunj === false ? '' : 'none' }}
                />
                <UpOutline style={{ display: yunj === false ? 'none' : '' }} />
              </Space>
            </Button>
            <div className="iin">
              {shuju.map((item, index) => {
                return (
                  <div
                    className="content"
                    key={index}
                    style={{ display: item.age === '运动' ? '' : 'none' }}
                  >
                    <div>
                      <img src={item.tup} alt="" />
                    </div>
                    <div className="tit">{item.title}</div>
                    <div>
                      ￥{item.price} <GiftOutline />
                    </div>
                  </div>
                );
              })}
            </div>
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  );
}
